<template>
    <table rules=none cellspacing=0 align=center>
        <thead>
            <th>标题</th>
            <th>用户</th>
            <th>描述</th>
        </thead>
        <tbody>
            <tr v-for="(item,index) in $parent.$parent.songsList" :key="item.id" :style="{'color': $parent.$parent.selectedIndex == index ? 'red':''}" @dblclick="$parent.$parent.playMusic(item.audioUrl,index,item.id)" >
                <td><img class="img-audio" @click="$parent.$parent.playMusic(item.audioUrl,index,item.id)" :src="$parent.$parent.selectedIndex == index && $parent.$parent.playstate ? isplaybuttonUrl : noplaybuttonUrl"><div style="float:left">{{item.title}}</div><img @click="$parent.$parent.playMv(item.videoUrl)" v-if="item.videoUrl != ''" class="img-video" src="../assets/mv.png" alt=""> </td>
                <td>{{item.username}}</td>
                <td>{{item.describeStr}}</td>
            </tr>
        </tbody>
    </table>
</template>
<script>
import axios from 'axios'
export default {
    data() {
        return {
            noplaybuttonUrl:require('../assets/play.png'),
            isplaybuttonUrl:require('../assets/is_play.png')
        }
    },
    methods: {
        
    },
}
</script>
<style lang="less" scoped>
thead{
    th{
        padding: 5px;
        border-bottom: solid 1px rgba(0, 0, 0,0.1);
        text-align: left;
        background-color: transparent;
    }
}
tbody{
    tr:hover{
        background-color: #B3C0D1;
    }
    // background-color: rosybrown;
    tr{
        background-color: transparent;
        border: 0;
    }
   td{  
       background-color: transparent;
       line-height: 30px;
        padding: 5px;         
        border: 0;
        height: 30px;
    }
    .img-audio{
        float: left;
        width: 30px;
        height: 30px;
    }
    .img-video{
        margin-left: 2px;
        float: left;
        width: 25px;
        height: 25px;
        margin-top: 2.5px;
    }
    .img-video:hover,.img-audio:hover,div:hover{
        cursor: pointer;
    }
    
}
table{
    border: solid 1px silver;
    background-color: transparent;
    padding: 10px;
    width: 100%;
}
</style>